<template>
    <div>
        <el-container>
            <!-- 菜品类别 -->
        <el-aside width="180px">
                <el-table :data="foodData" :cell-style="{border:'1px solid #DCDCDC'}"
                :header-cell-style="{border:'1px solid #DCDCDC',textAlign:'left'}" @cell-click='onFoodcategory'>
                    <el-table-column prop="category" label="菜品类别" align='center'></el-table-column>
                </el-table>
            </el-aside>
            <el-container>
                <el-header>
                    <p>查询</p>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="搜索：">
                            <el-input v-model="formInline.foodId" placeholder="请输入要查询的菜品编号" icon="el-icon-search"></el-input>
                        </el-form-item>                       
                        <el-form-item>
                            <el-button type="primary" round @click="onSale">预销量</el-button>
                            <el-button type="primary" round @click="onDiscontinued">停售</el-button>
                            <el-button type="primary" round @click="onEstimate">估清</el-button>
                        </el-form-item>
                    </el-form>
                </el-header>
                <!-- 菜品列表 -->
                <el-main>
                    <!-- 表格 -->
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :cell-style="{border:'1px solid #DCDCDC'}"
                    :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="160" align='center'></el-table-column>
                        <el-table-column prop="id" label="ID" width="160" align='center'></el-table-column>
                        <el-table-column prop="foodId" label="菜品编号" width="200" align='center'></el-table-column>
                        <el-table-column prop="foodName" label="菜品名称" width="202" align='center'></el-table-column>
                        <el-table-column prop="price" label="售价" width="180" align='center'></el-table-column>
                        <el-table-column prop="num" label="剩余数量" width="180" align='center'></el-table-column>
                        <el-table-column prop="type" label="状态" width="200" align='center'></el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    :page-sizes="[5,10,15,20,25,30]" :page-size="5" layout="total,sizes,prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped lang='less'>
    .clear::after{
        content: '';
        display: block;
        clear: both;
    }
    .el-aside{
        margin-right: 15px;
    }
    .el-header{
        margin-top: 20px;
        border: 1px solid #DCDCDC;
        height: 100px !important;
        padding: 15px 30px;
        .el-form{
            margin-left:50px;
            .el-form-item{
                margin-right: 60px;
                .el-input{
                    width: 220px;
                }
                .el-button{
                    margin-right: 15px;
                    width: 120px;
                }
            }
        }
    }
    .el-main{
        margin-top: 15px;
        border: 1px solid #DCDCDC;
        padding: 28px 20px 20px 20px;
    }
    .el-table{
        margin-bottom: 50px;
    }
    .el-pagination{
        text-align: center;
    }
</style>
<script>
export default {
    data(){
        return{
            // 搜索框数据
            formInline:{
                foodId:''
            },
            // 菜品类别数据
            foodData:[],
            // 菜品总数据
            totalData:[],
            // 中间数组
            centerData:[],
            // 页码
            page:1,
            // 条数
            // // 菜品数据
            // tableData:[
            //     {
            //         id:'10',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'停售'
            //     },
            //     {
            //         id:'9',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'正常'
            //     },
            //     {
            //         id:'10',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'停售'
            //     },
            //     {
            //         id:'8',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'停售'
            //     },
            //     {
            //         id:'7',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'停售'
            //     },
            //     {
            //         id:'6',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'停售'
            //     },
            //     {
            //         id:'5',
            //         foodId:'12345678',
            //         foodName:'农家小炒肉',
            //         price:'57.00',
            //         num:'100',
            //         type:'停售'
            //     },
            // ]
        }
    },
    methods: {
        // 查询
        onSearch(){
            this.$axios({
                url:'/yl/foodmanage/getfoodid',
                params:this.formInline,
            }).then((res)=>{
                this.totalData=res.data.data
                this.page=1
            })
        },
        // 重置
        onReset(){
            this.getFoodmanage();
            this.formInline={
                foodId:'',
            }
        },
        // 批量选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 预销量
        onSale(){

        },
        // 停售
        onDiscontinued(){

        },
        // 估清
        onEstimate(){

        },
         // 每页多少条数据
        handleSizeChange(count) {
            this.count=count
        },
        // 分页
        handleCurrentChange(page) {
           this.page=page
        },
        // 对应菜品类别列表
        onFoodcategory(row){
            this.page=1
            this.$axios({
                url:'/yl/foodmanage/getfoodcategory',
                // params:{area:row.table_position}
            }).then((res)=>{
               this.totalData=res.data.data
            })
        },
    }
}
</script>